<template>
  <div class="client-users">
    <div class="client-users-content">
      <div class="title">用户列表</div>
      <div class="operation-box">
        <el-button type="primary" :icon="Refresh" @click="table_reload"
          >刷新</el-button
        >
        <el-button
          type="danger"
          v-if="table_data_origin && table_data_origin.length > 0"
          :icon="Download"
          @click="export_excel(table_data_origin, '用户列表')"
          >导出数据</el-button
        >

        <el-input
          v-model="search_username"
          class="w-50 m-2"
          size="default"
          style="width: 180px; margin: 0 10px 0 30px"
          clearable
          :prefix-icon="Search"
          @input="search_filter"
          placeholder="输入用户昵称搜索"
        />
        <el-input
          v-model="search_phone"
          class="w-50 m-2"
          size="default"
          :prefix-icon="Search"
          style="width: 180px; margin: 0 10px 0 0px"
          clearable
          @input="search_filter"
          placeholder="输入用户手机号搜索"
        />
        <el-button type="default" @click="search_reset">重置</el-button>
      </div>
      <el-table
        :data="table_data"
        table-layout="auto"
        size="large"
        style="width: 100%"
        height="550"

        v-loading="table_loading"
        :element-loading-svg="table_svg"
        class="custom-loading-svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
      >
        <el-table-column label="注册日期" prop="date" width="180" />
        <el-table-column label="用户ID" prop="user_id" width="180" />
        <el-table-column label="用户头像" width="180">
          <template #default="scope">
            <div>
              <img
                :src="scope.row.avatar"
                style="width: 60px; height: 60px; object-fit: cover"
                alt=""
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" prop="user_name" width="180" />
        <el-table-column label="手机号" prop="phone" width="220" />
        <el-table-column label="地址" prop="address" width="490" />
      </el-table>
    </div>
    <el-pagination
      style="
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
        margin-left: 2.5%;
      "
      background
      @current-change="page_change"
      layout="prev, pager, next"
      :total="pagination_total"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { Refresh, Download, Search } from "@element-plus/icons-vue";
import { export_excel } from "../../../common/utils";
import { getClientUserList } from "../../ajaxServices/user";

// interface User {
//   user_id: number;
//   open_id: string;
//   date: string;
//   user_name: string;
//   phone: string;
//   address: string;
//   avatar: string;
// }

const table_data_origin = ref([]);

const table_data = ref([]);
const current_page = ref(1); // 当前页码
const page_size = 6; // 每页条数
const pagination_total = ref(1); // 页码总条数

const table_loading = ref(false);
const search_username = ref("");
const search_phone = ref("");

const table_svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const search_filter = () => {
  console.log("search_username: " + search_username.value);
  console.log("search_phone: " + search_phone.value);
  if (search_username.value == "" && search_phone.value == "") {
    table_data.value = table_data_origin.value;
    return;
  }

  if (search_username.value != "" && search_phone.value == "") {
    table_data.value = table_data_origin.value.filter((data: any) =>
      data.user_name.toLowerCase().includes(search_username.value.toLowerCase())
    );
  }

  if (search_username.value == "" && search_phone.value != "") {
    table_data.value = table_data_origin.value.filter((data: any) =>
      data.phone.toLowerCase().includes(search_phone.value.toLowerCase())
    );
  }

  if (search_username.value != "" && search_phone.value != "") {
    table_data.value = table_data_origin.value.filter(
      (data: any) =>
        data.phone.toLowerCase().includes(search_phone.value.toLowerCase()) &&
        data.user_name
          .toLowerCase()
          .includes(search_username.value.toLowerCase())
    );
  }
};

// 重置搜索框
const search_reset = () => {
  search_username.value = "";
  search_phone.value = "";
  table_data.value = table_data_origin.value;
};

// 分页切换页码
const page_change = (currentPage: number) => {
  current_page.value = currentPage;
  table_reload();
};

// 刷新表格数据
const table_reload = () => {
  table_loading.value = true;

  let reqData = {
    page_size: page_size,
    page_count: current_page.value,
  };

  getClientUserList(reqData)
    .then((res: any) => {
      table_loading.value = false;
      table_data_origin.value = res.data || [];
      table_data.value = res.data || [];
      pagination_total.value = res.total;
    })
    .catch(() => {
      table_loading.value = false;
    });
};
table_reload();
</script>


<style scoped lang="scss">
.client-users {
  .client-users-content {
    width: 95%;
    height: 80%;
    max-height: calc(100vh - 60px - 40px - 100px);
    border: 1px solid #eee;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);

    .title {
      width: 100%;
      height: 55px;
      font-size: 18px;
      color: #000;
      text-align: left;
      line-height: 55px;
      text-indent: 20px;
      border-bottom: 1px solid #eee;
    }

    .operation-box {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
  }
}
</style>






